<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css-doodle</title>
  <script src="https://unpkg.zhimg.com/css-doodle"></script>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <css-doodle>
    :doodle {
      @grid: 20 / 100vmax;
      background: #12152f;
    }

    ::after {
      content: '\@hex(@rand(0x2500, 0x257f))';
      font-size: 5vmax;
      color: hsla(@rand(360), 70%, 70%, @rand(.9))
    }
  </css-doodle>
</body>
</html>